<template>
    <view class="Collection">
        <uv-navbar
            title="我的收藏"
            @leftClick="leftClick"
            bg-color="linear-gradient(to right, #D2F1DE 0%, #E3F6E8 50% ,#D2F1DE 100%)"
            :fixed="true"
        ></uv-navbar>
        <view class="tabs">
            <uv-tabs
                :list="list"
                @click="click()"
                :activeStyle="{ color: '#057748' }"
                :lineColor="'#057748'"
            ></uv-tabs>
        </view>
        <view class="cart">
            <view
                class="cart-item"
                v-for="i in getlist"
                :key="i"
                @click.stop="Godetail(i.goods.id)"
            >
                <image
                    :src="BaseUrl + i.goods.image"
                    style="
                        border-radius: 20rpx;
                        width: 200rpx;
                        height: 200rpx;
                        margin-left: 20rpx;
                    "
                    mode="scaleToFill"
                />
                <view class="cart-get">
                    <view class="cart-title">{{ i.goods.title }}</view>
                    <view class="cart-text">
                        <view class="cart-price">¥ {{ i.goods.price }} </view>
                        <view class="cart-vip"
                            >会员价:¥ {{ i.goods.sku[0].vip_price }}</view
                        >
                    </view>
                    <view class="cart-integration"
                        >购物获得积分{{ i.goods.sku[0].stock }}</view
                    >
                    <view class="cart-shop">{{ i.shop.shopname }}</view>
                </view>
                <view class="cart-delete" @click.stop="del(i.goods.id)"
                    >删除</view
                >
            </view>
        </view>
    </view>
</template>

<script>
import { getCollectionList } from "@/utils/play.js";
import { BaseUrl } from "../../../utils/req.js";
export default {
    data() {
        return {
            BaseUrl,
            list: [
                {
                    name: "全部",
                },
                {
                    name: "商品收藏",
                },
                {
                    name: "团购收藏",
                },
            ],
            getlist: [],
            type: "goods",
            page: 1, //分页
            total: 0, //总条数
            userData: {
                user_no: "",
            },
        };
    },
    onLoad() {
        // this.getAll();
    },
    methods: {
        // async getAll() {
        //     const res2 = await getCollectionList({ type: "goods" });
        //     const res1 = await getCollectionList({ type: "groups" });
        //     let array = [];
        //     res2.data.data.forEach((item) => array.push(item));
        //     res1.data.data.forEach((item) => array.push(item));
        //     this.getlist = array;
        // },
        Godetail(id) {
            let pid = 0;
            this.$request
                .get("api/wanlshop.product/goods", { id: id })
                .then((res) => {
                    pid = res.data.category.pid;
                });
            if (pid == 11 || pid == 14) {
                uni.navigateTo({
                    url: `/dabai/pages/caterDetails/caterDetails?id=${id}`,
                });
            } else {
                uni.navigateTo({
                    url: `/pages/product/goods?id=${id}`,
                });
            }
        },
        // 切换
        async click(item) {
            // console.log(item, "u0dfihoiho;pilh");
            if (item.index == 2) {
                this.type = "groups";
                this.page = 1;
                this.getlist = [];
                this.collection(this.type);
            } else if (item.index == 1) {
                this.type = "goods";
                this.page = 1;
                this.getlist = [];
                this.collection(this.type);
            } else if (item.index == 0) {
                this.getlist = [];
                this.type = "goods";
                this.page = 1;
                this.collection(this.type);
                this.type = "groups";
                this.page = 1;
                this.collection(this.type);
            }
            // else if (item.index == 3) {
            //     this.page = 1;
            //     this.getlist = [];
            //     this.getCaoCollection();
            // }
        },
        // async getGroupCollection() {
        //     const res = await getCollectionList({ type: "groups" });
        //     this.getlist = res.data.data;
        //     console.log("团体收藏", res.data.data);
        // },
        leftClick() {
            uni.navigateBack();
        },
        // 删除
        del(i) {
            console.log(i);
            // 确认框
            uni.showModal({
                title: "提示",
                content: "是否确认删除该商品",
                success: async (res) => {
                    if (res.confirm) {
                        await this.$request
                            .post("api/wanlshop/product/follow", { id: i })
                            .then((res) => {
                                uni.showToast({
                                    title: "删除成功",
                                });
                            });
                        // 刷新
                        this.click({
                            index: 0,
                        });
                    }
                },
            });
        },
        // 收藏列表
        async collection(type) {
            const res = await getCollectionList({
                type: type,
                page: this.page,
            });
            this.getlist = [];
            this.getlist = [...this.getlist, ...res.data.data];
            this.total = res.data.total;
        },
        loadData() {
            this.$request
                .post("/api/wanlshop.find.user/userInfo", {
                    id: this.find_user,
                })
                .then((res) => {
                    if (res.data.user_id === this.$store.state.user.id) {
                        this.isMyfind = true;
                    }
                    this.userData = res.data;
                });
        },
        //种草收藏
        // getCaoCollection() {
        //     this.$request
        //         .post("api/wanlshop.find.find/getList?", {
        //             type: "likes",
        //             user_no: this.userData.user_no,
        //             page: this.page,
        //         })
        //         .then((res) => {
        //             console.log(res.data, "种草收藏");
        //             this.getlist = [...this.getlist, ...res.data.data];
        //             this.total = res.data.total;
        //             console.log("种草收藏", res.data.data);
        //         });
        // },
    },
    onReachBottom() {
        if (this.getlist.length == this.total) return;
        this.loading = true;
        this.page++;
        this.collection(this.type); //收藏列表
    },
    onShow() {
        this.page = 1;
        this.getlist = [];
        this.click({ index: 0 });
        // this.loadData();
    },
};
</script>

<style lang="scss" scoped>
/deep/.uv-tabs__wrapper__nav__item {
    width: 33% !important;
}

.Collection {
    width: 100%;
    height: 100vh;
    background: linear-gradient(
        to bottom,
        #d3f1de 0%,
        #f4f6f5 30%,
        #f6f6f6 100%
    );

    .tabs {
        margin: 0 20rpx;
        padding-top: 180rpx;
    }

    .cart {
        width: 94vw;
        margin: 0 3vw;
        padding-top: 20rpx;

        .cart-item {
            width: 100%;
            height: 240rpx;
            background-color: #fff;
            border-radius: 16rpx;
            display: flex;

            align-items: center;
            margin-bottom: 20rpx;
            margin-bottom: 18rpx;
            position: relative;

            .cart-get {
                width: 56vw;
                height: 200rpx;
                margin-left: 20rpx;

                .cart-title {
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #121212;
                    line-height: 1.2;
                    margin-top: 10rpx;
                }

                .cart-text {
                    height: 40rpx;
                    margin-top: 10rpx;
                    display: flex;
                    align-items: center;
                    font-family: Source Han Sans CN;

                    .cart-price {
                        font-family: Source Han Sans CN;
                        font-weight: 500;
                        font-size: 30rpx;
                        color: #eb5c20;
                        padding: 0 20rpx 0 0;
                    }

                    .cart-vip {
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        font-size: 22rpx;
                        color: #eb5c20;
                        border-left: 1rpx solid #eb5c20;
                        padding: 0 10rpx;
                        height: 20rpx;
                    }
                }

                .cart-integration {
                    font-family: Source Han Sans CN;
                    font-weight: 300;
                    font-size: 24rpx;
                    color: #999999;
                    margin: 12rpx 0 0 0;
                }

                .cart-shop {
                    font-family: Source Han Sans CN;
                    font-weight: 300;
                    font-size: 24rpx;
                    color: #999999;
                    margin: 12rpx 0 0 0;
                }
            }

            .cart-delete {
                width: 150rpx;
                height: 50rpx;
                position: absolute;
                right: -18rpx;
                bottom: 10rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 24rpx;
                color: #999999;
            }
        }
    }
}
</style>
